<template>
  <!-- 导航栏 -->
  <div class="home text-center">
    <van-nav-bar
      title="本周食谱"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 今日食谱 -->
    <h3>今日食谱</h3>
    <div>
      <p>{{ showtime }}</p>
      <p>{{ week }}</p>
    </div>
    <van-cell-group inset>
      <van-cell
        center
        icon="orders-o"
        title="晚饭"
        size="large"
        label="藕粉 南瓜泥 苹果汁 藕泥虾面"
      />
    </van-cell-group>
    <h3>本周食谱</h3>
    <!-- 标签页 -->
    <van-tabs v-model:active="activeName">
      <van-tab title="周一" name="a">
        <van-cell-group inset>
          <van-cell
            center
            icon="orders-o"
            title="晚饭"
            size="large"
            label="藕粉 南瓜泥 苹果汁 藕泥虾面"
          />
        </van-cell-group>
      </van-tab>
      <van-tab title="周二" name="b">
        <van-cell-group inset>
          <van-cell
            center
            icon="orders-o"
            title="晚饭"
            size="large"
            label="大白菜莲藕米糊 油菜鸭肉粥 红枣山药泥 鳕鱼豌豆粥"
          />
        </van-cell-group>
      </van-tab>
      <van-tab title="周三" name="c">
        <van-cell-group inset>
          <van-cell
            center
            icon="orders-o"
            title="晚饭"
            size="large"
            label="紫薯泥米糊 红白小兔子 西兰花虾泥软饭 菠萝汁"
          />
        </van-cell-group>
      </van-tab>
      <van-tab title="周四" name="d">
        <van-cell-group inset>
          <van-cell
            center
            icon="orders-o"
            title="晚饭"
            size="large"
            label="西红柿胡萝卜鱼肉羹 鸡肉泥 地瓜叶汁 红豆稀饭"
          />
        </van-cell-group>
      </van-tab>
      <van-tab title="周五" name="e">
        <van-cell-group inset>
          <van-cell
            center
            icon="orders-o"
            title="晚饭"
            size="large"
            label="牛奶番薯泥 鲈鱼泥软面 地瓜叶汁 番茄蛋打卤面"
          />
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>
  
  <script type="text/javascript" lang="ts" >
import { NavBar } from "vant";
import { Tab, Tabs } from "vant";
import { defineComponent } from "vue";
import { ref } from "vue";
import { Cell, CellGroup } from "vant";

export default defineComponent({
  watch: {
    $route() {
      window.location.reload();
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  setup() {
    const onClickLeft = () => history.back();
    const activeName = ref("a");
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const weekArr = [
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
      "星期天",
    ];
    const week = weekArr[date.getDay()];
    const showtime = year + "/" + month + "/" + day;

    return {
      onClickLeft,
      activeName,
      showtime,
      week,
    };
  },
});
</script>
  <style scoped>
h3 {
  font-size: 15px;
  font-family: Helvetica;
  font-weight: bold;
}
div {
  font-size: 15px;
  font-family: Helvetica;
}
:root {
  --van-cell-group-title-color: black;
}
.van-nav-bar {
  --van-nav-bar-background-color: #00bfff;
  --van-nav-bar-title-text-color: white;
  --van-nav-bar-icon-color: white;
  --van-nav-bar-text-color: white;
}
.van-cell-group {
  --van-cell-title-color: black;
  --van-cell-group-title-color: black;
  --van-cell-font-size: 15px;
  --van-cell-line-height: 35px;
  --van-cell-vertical-padding: 5px;
  --van-cell-horizontal-padding: 5px;
  --van-cell-text-color: black;
  --van-cell-background-color: rgb(114, 183, 223);
  --van-cell-label-color: black;
  --van-cell-value-color: black;
  --van-cell-label-font-size: 30px;
}
</style>